<template>
  <el-dialog
    v-model="checkOrderVisible"
    title="财务审核信息"
    width="80%"
  
    @close=" () => {
              closeDialog(false);
            }"
  >
    <el-form
      ref="validateForm"
      :model="orderForm"
      :rules="rules"
      label-width="120px"
      :status-icon="true"
      
    >
     <el-row>
        <el-col :span="12">
       <el-form-item label="客户"  style="margin-bottom:0px;">
       {{orderForm.customerInfo.name}}
      </el-form-item>
     </el-col>
     
        <el-col :span="12">
      <el-form-item label="手机电话" style="margin-bottom:0px;" >
        {{orderForm.customerInfo.phone}} 
      </el-form-item>
      </el-col>
       </el-row>

       <el-row>
        <el-col :span="12">
      <el-form-item label="地址" style="margin-bottom:0px;">
        {{orderForm.customerInfo.address}} 
      </el-form-item>  
        </el-col>
      <el-col :span="12">
          <el-form-item label="所属经销商" style="margin-bottom:0px;">
            {{orderForm.dealerName}} 
          </el-form-item>  
        </el-col>
        
       </el-row>
         <el-row>
        <el-col :span="12">
          <el-form-item label="收款人" style="margin-bottom:0px;"> {{orderForm.depositer}}</el-form-item>
      </el-col>
       <el-col :span="12">
         <el-form-item label="下单日期" style="margin-bottom:0px;"> {{orderForm.orderDate}}</el-form-item>
      </el-col>
      </el-row>
      <el-row>
           <el-col :span="12">
      <el-form-item label="定金" style="margin-bottom:0px;">
       {{orderForm.deposit}}
      </el-form-item>
      </el-col>
       <el-col :span="12">
       <el-form-item label="业务员" style="margin-bottom:0px;">
         {{ orderForm.businessName}}
      </el-form-item>
      </el-col>
      </el-row>
       <el-row>
           <el-col :span="12">
      <el-form-item label="审核人" style="margin-bottom:0px;">
        {{ orderForm.reviewerName}}
      </el-form-item>
      </el-col>
       <el-col :span="12">
      
 <el-form-item label="备注信息" style="margin-bottom:0px;">
      {{orderForm.remark}}</el-form-item>
      
</el-col>
</el-row>
<el-row>
    <el-col  :span="12">
     
         <el-form-item label="订单状态" >{{orderStatusLabel}}
        
      </el-form-item>
       </el-col>
      <el-col :span="12">
          <el-form-item label="订单类型" >
              {{orderTypeList[orderForm.orderType].label}}
        </el-form-item>
      </el-col>
</el-row>
<el-row>
  
      <el-col :span="24">
          <el-form-item label="审核意见" >
              {{orderForm.auditing.opinion}}
        </el-form-item>
      </el-col>
</el-row>

      <el-row style="margin-bottom:5px;">
            <el-col :span="6">税率(%)：<el-input v-model="orderDetail.taxRate" style="width:100px;" size="mini" /></el-col>
             <el-col :span="6">订购数量：<el-input v-model="orderDetail.orderCount" style="width:100px;" size="mini"/></el-col>
            <el-col :span="6">税后单价：<el-input v-model="orderDetail.price" style="width:100px;" size="mini"/></el-col>
            <el-col :span="6"><el-button @click="submitDetailData()" size="mini" type="primary" >修改</el-button></el-col>
      </el-row>
        <el-row>
       <el-table :data="orderDetailData"  highlight-current-row 
        @current-change="currentRowSelect"
        row-key="id" style="width: 100%">
        <el-table-column prop="product.name" label="订购商品" />
        <el-table-column prop="product.code" label="订购商品" />
        <el-table-column prop="product.unitName" label="订购商品" />
         <el-table-column prop="product.taxRate" label="税率(%)" />
         <el-table-column prop="orderCount" label="订购数量" />
         <!-- <el-table-column prop="actualCount" label="出货数量" /> -->
        <el-table-column  label="税后单价" prop="price" >
          
        </el-table-column>
        <el-table-column prop="amountPrice" label="税后金额" />
      </el-table>


     
      </el-row>
      <el-row style="margin-top:20px;">
        <el-col :span="24">
           <el-form-item>
        <el-button type="primary" @click="submitForm">通过</el-button>
        <el-button
          @click="
            () => {
              closeDialog(false);
            }
          "
          >取消</el-button
        >
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </el-dialog>
</template>

<script>
import {onMounted, reactive, toRefs,ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { postRequest,getRequest,putRequest } from "../../utils/api";
 
 

export default {
  components: {},
  props: {
    checkOrderId:String,
    checkOrderVisible: Boolean
  },

  setup(props, { emit }) {
      const validateForm = ref();

    const state = reactive({
        orderDetail:{
            id:'',
            taxRate:'' ,
           price:'',
           orderCount:''
        },
      checkOrderVisible: props.checkOrderVisible,
      checkOrderId:props.checkOrderId,
      orderStatusLabel:computed(()=>{
        if(state.orderForm.orderStatus){
          return state.orderStatusList[state.orderForm.orderStatus].label ;
        }else{
          return '' ;
        }
       
      }),
      orderDetailData:[],
       orderStatusList: [
        {value: 0,label: "待提交"},
        {value: 1,label: "待审核"},
        {value: 2,label: "审核通过"},
        {value: 3,label: "审核不通过"},
        {value: 4,label: "制单"},
        {value: 5,label: "待发货"},
        {value: 6,label: "安装调试完毕"},
        {value:7,label: "待收尾款"},
         {value:8,label: "订单完成"}
        
      ], opinion:'通过',
       orderTypeList:[ {value: 0,label: "直销"},
        {value: 1,label: "维修"},
        {value: 2,label: "调换"},
         {value: 3,label: "补发"}],
      orderForm: {
        orderType:0,
          customerInfo:{
            name:'',
            phone:'',
            address:''
          },
         auditing:{
             opinion:'',
             createDate:''
         },
          orderStatus:1
       
      }
    });
 const rules = {
     
      orderStatus: [{ required: true, message: "请选择订单状态", trigger: "blur" }],
      opinion:[{ required: true, message: "请输入审核意见", trigger: "blur" }],
      
    };


    const closeDialog = (visible, data) => {
      
      emit("OnCloseCheckDialog", data);
    };
   
    const loadOrderData = ()=>{
         getRequest("/order/basic/check/one", { id: state.checkOrderId }).then((res) => {
            if (res && res.code == 200) {
            state.orderForm = res.data;
            } else {
            ElMessage({
                type: "error",
                title: "失败",
                message: "查询失败",
                duration: 2000,
            });
            }

     
        });
    }
    //加载订单细项数据
    const loadOrderDetailData = () => {
      getRequest("/order/basic/detail/", { id: state.checkOrderId }).then(
        (response) => {
          if (response) {
            state.orderDetailData = response.data;
          }
        }
      );
    };
    const submitForm=()=>{
      
        postRequest("/order/basic/doCheck?id="+state.checkOrderId,).then((res) => {
        if (res && res.code == 200) {
            ElMessage.success("审核操作成功")
             emit("OnCloseCheckDialog", {id:state.checkOrderId});
        } else {
          ElMessage.error({
            type: "error",
            title: "失败",
            message: "操作失败",
            duration: 2000,
          });
        }
 
  });
    }
        const currentRowSelect = (currentRow, oldCurrentRow) => {
            state.orderDetail = currentRow ;
    };

    const submitDetailData = ()=>{
       let params =  {
         id: state.orderDetail.id,
         taxRate: state.orderDetail.taxRate,
         price: state.orderDetail.price,
         orderCount: state.orderDetail.orderCount}
       putRequest("/order/basic/detail/check", params).then((res) => {
          if (res && res.code == 200) {

              loadOrderDetailData()
              //置空
              state.orderDetail.id='',
              state.orderDetail.taxRate='',
              state.orderDetail.price='',
              state.orderDetail.orderCount=''
           ElMessage({
              showClose: true,
              message: res.message,
              type: "success",
            });
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
    }
    onMounted(()=>{
      loadOrderData()
      loadOrderDetailData()
    })
    return {
      ...toRefs(state),
      closeDialog,
       submitForm ,currentRowSelect,submitDetailData
      
    };
  },
};
</script>

<style scoped>
 
.el-row{
  margin-bottom: -15px;
}
</style>